<template>
  <!--  这是大div包裹全局  -->
  <div class="frame">
<!--  这是主体列表区域  -->
    <div class="content-frame">
      <div class="content-frame-list">
        <strong class="content-frame-list-time">
          16:50
        </strong>
        <strong class="content-frame-list-title">标题</strong>
        <div class="content-frame-list-date">
          <div class="content-frame-list-date-date">8-21<br>2021</div>
          <div class="content-frame-list-date-content">内容</div>
        </div>
        <div class="content-frame-list-a">
          <div class="content-frame-list-a-area"></div>
          <a class="content-frame-list-a-a" href="">编辑</a>
          <a class="content-frame-list-a-a" href="">删除</a>
        </div>
      </div>
      <div>
        <el-pagination
            :total="50"
            :size="20">111
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecordList',
  data() {
    return {

    };
  },
  methods: {
  }
}
</script>


<style scoped lang="scss">
.frame {
  display: flex;
  .content-frame{
    .content-frame-list{
      margin-bottom: 1rem;
      .content-frame-list-time {
        font-size: 1em;
        margin-right: 0.5rem;
        color: #767676;
      }
      .content-frame-list-title {
        font-size: 1em;
        color: #515151;
      }
      .content-frame-list-date {
        padding: 10px;
        font-size: 0.8em;
        display: flex;
        .content-frame-list-date-date {
          width: 3.5rem;
          color: gray;
        }
        .content-frame-list-date-content {
          color: #515151;
        }
      }
      .content-frame-list-a {
        display: flex;
        .content-frame-list-a-area {
          width: 3.5rem;
        }
        .content-frame-list-a-a {
          color: #00a0e9;
          font-size: 10px;
          margin-right: 0.5rem;
        }
      }
    }
  }
}
</style>
